// codesandbox 提升逼格
// console.log('html+ src module open')

// 虚拟dom 批量状态更新
import React from 'react'
import ReactDOM  from 'react-dom'

// 类式，有状态组件
class ClassCount extends React.Component{
    constructor(props){
        super(props)
        // 使用了类的方法报有状态
        // 如果是函数
        // 函数会重新执行一遍，变量，丢失
        // statelessComponent 无状态组件 jsx

        // hooks  钩子  hooks 原理
        this.state={
            number:0
        }
    }
    handlerClick=()=>{
        for(let i=0;i<5;i++){
            // setState 如果在timeout 中会表现为同步的
            setTimeout(() => {
                this.setState({number:this.state.number+1});
                // this.setState({number:this.state.number+1});
                // this.setState({number:this.state.number+1});
                // this.setState({number:this.state.number+1});
                // this.setState({number:this.state.number+1});
                console.log(this.state.number)
            }, 1000);
        }
    }
    render(){
        return <div>
            {this.state.number}
            <button onClick={this.handlerClick}>num++</button>
        </div>
    }
}

function FunctionCount(){
    // userState 应该干了点什么 
    // 目的是在多次函数执行中保存了状态
    // 生命周期，mount update 重新运行函数
    const [num,setNum] = React.useState(0)
    const handlerClick = ()=>{
        for(let i=0;i<5;i++){
            setTimeout(() => {
                setNum(num+1)
                console.log(num)               
            }, 1000);
        }
    }

    return <button onClick={handlerClick}>{num}</button>
}

function App(){
    return (
        <>app
            {/* <ClassCount /> */}
            <FunctionCount />
        </>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)


import {h,Fragment,PORTAL} from './h'
import {Component} from './component'

const elementVNode = h('div',null,h('span'));

const ulVnode = h('ul',{className:'list'},[h('li',null,h('span',null,'a')),h('li',null,h('span',null,'b'))]);
// <ul className = 'list'>
//     <li><span>a</span></li>
//     <li><span>b</span></li>
// </ul>

const elementWithTextNode = h('div',null,'我是文本');

// fragment 就是 symbol 
const fragmentVNode=h(Fragment,null,[h('h1'),h('h1')]);
// 抽象 ， 复杂业务能力
const portalVNode = h(PORTAL,{
    target:'#box',
},[h('h1')]);
// vnode json 

console.log(elementVNode,ulVnode,elementWithTextNode,fragmentVNode,portalVNode);

function MyFunctionalComponent(){

}
MyFunctionalComponent.prototype.render=function(){
    return (<><h1>sdjkf</h1></>)
}

const functionalComponentVNode = h(MyFunctionalComponent,null,h('div'))

console.log(functionalComponentVNode)

class MyStatefulComponent extends Component{

}

const statefulComponentVNode = h(MyFunctionalComponent,null,h('div'))

console.log(statefulComponentVNode)